<template>
    <!-- #ifndef H5 -->
    <u-sticky h5-nav-height="0" bg-color="transparent">
        <u-navbar
            :class="{ 'fixed top-0 z-10': isLargeScreen }"
            :is-back="false"
            :is-fixed="true"
            :title="metaData"
            :border-bottom="false"
            :title-bold="true"
            :title-size="36"
            :background="{ background: 'rgba(256,256, 256, 0)' }"
            :title-color="'#222222'"
            :title-style="{
                color: '#222222',
                left: '20rpx',
                width: 'calc(100% - 120rpx)',
                textAlign: 'left'
            }"
        >
<!--            <template #default>-->
<!--                <navigator-->
<!--                    url="/pages/search/search"-->
<!--                    class="mini-search"-->
<!--                    hover-class="none"-->
<!--                    :style="{ opacity: isLargeScreen ? 1 : percent }"-->
<!--                >-->
<!--                    <u-icon name="search"></u-icon>-->
<!--                </navigator>-->
<!--            </template>-->
        </u-navbar>
    </u-sticky>
    <!-- #endif -->
    <navigator
        v-if="!isLargeScreen"
        url="/pages/search/search"
        class="px-[24rpx] mt-[24rpx] mb-[30rpx]"
        :style="{ opacity: 1 - percent }"
        hover-class="none"
    >
        <u-search
            placeholder="请输入关键词搜索"
            :height="80"
            :disabled="true"
            :show-action="false"
            search-icon-color="#1e88f8"
            bgColor="#ffffff"
            :show-left-icon="false"
            :show-right-icon="true"
        ></u-search>
    </navigator>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps({
    pageMeta: {
        type: [Object, String],
        default: () => []
    },
    content: {
        type: Object,
        default: () => ({})
    },
    styles: {
        type: Object,
        default: () => ({})
    },
    isLargeScreen: {
        type: Boolean
    },
    percent: {
        type: Number
    }
})

const metaData: any = computed(() => {
    return props.pageMeta
})
</script>

<style scoped>
.mini-search {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60rpx;
    height: 60rpx;
    margin-left: 20rpx;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}
</style>
